import { List, Avatar, Icon, Spin, Button } from 'antd';
import React from 'react';

const listData = [
  {
    href: 'https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-18308614462.5.659d5967RVv0bX&id=567874544543',
    title: '轻量尼龙中长复古风衣',
    description: 'URBAN FOREST(UBFR.)18 1st. HOBO COAT 2.0轻量尼龙中长复古风衣',
    content: '衣长: 中长款/版型: 标准/衣门襟: 单排扣/颜色: 浅卡其 墨绿色/尺码: S M L XL/品牌: 其它/other/适用季节: 春季/ 适用场景: 其他休闲/    /基础风格: 青春流行',
    img: './src/assets/cloth4.jpg',
  }, {
    href: 'https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-18308614462.6.659d5967RVv0bX&id=568200867982',
    title: '4K超高清液晶平板电视机',
    description: 'Skyworth/创维 55M9 55英寸4K超高清液晶平板电视机55寸网络智能',
    content: '证书编号：2017010808007878/证书状态：有效/产品名称：彩色液晶电视机/3C规格型号：50M9：220V～ 50Hz 120W/产品名称：Skyworth/创维 55M9/分辨率: 4K电视/3D类型: 无/能效等级: 三级/网络连接方式: 全部支持/操作系统: 酷开系统/品牌: Skyworth/创维/创维LED型号: 55M9',
    img: './src/assets/tv1.jpg',
  },
  {
    href: 'https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-18308614462.6.659d5967RVv0bX&id=568200867982',
    title: 'SHIRT八分袖复古棒球衬衫',
    description: 'URBAN FOREST(UBFR.)18 1st. BASEBALL SHIRT八分袖复古棒球衬衫 ',
    content: '衣长: 中长款/版型: 标准/衣门襟: 单排扣/颜色: 浅卡其 墨绿色/尺码: S M L XL/品牌: 其它/other/适用季节: 春季/ 适用场景: 其他休闲/    /基础风格: 青春流行',
    img: './src/assets/cloth1.jpg',
  },
  {
    href: 'https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-18308614462.19.60e959679YBGUN&id=568196239692',
    title: 'HOODED毛圈底尼龙防风卫衣',
    description: 'URBAN FOREST(UBFR.)18 1st. PULLOVER HOODED毛圈底尼龙防风卫衣 ',
    content: '款式: 套头/颜色: 白色 卡其色 灰色 藏青色/尺码: S M L XL/品牌: 其他/other/图案: 纯色/基础风格: 青春流行/',
    img: './src/assets/cloth2.jpg',
  },
  {
    href: 'https://item.taobao.com/item.htm?spm=a21bo.2017.201867-rmds-5.3.5af911d917stYb&scm=1007.12807.84406.100200300000004&id=544043831888&pvid=ba55abc1-8903-4d34-809d-8feb645301a0',
    title: '卡西欧CASIO石英指针学生男表',
    description: '卡西欧CASIO石英指针学生男表日历防水 树脂男女手表 MW-59-7B ',
    content: '机芯产地: 日本/品牌: Casio/卡西欧/风格: 时尚潮流/显示方式: 指针式/颜色分类: MW-59-1E带日历 MW-59-7B带日历 MW-59-7E带日历 MW-59-1B带日历/防水深度: 50m/ 附加功能: 日历/ 表扣款式: 针扣/ 表底类型: 普通/ 表冠类型: 普通/ 表盘厚度: 8mm/ 表盘直径: 35mm/ 品牌产地: 日本/ 流行元素: 复古/ 表壳材质: 其他',
    img: './src/assets/watch.jpg',
  },
];

const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);

class CommdityList extends React.Component {
  state = {
    loading: false,
    loadingMore: false,
    showLoadingMore: true,
    data: listData,
  }
  onLoadMore = () => {
    this.setState({
      loadingMore: true,
    });
    const data = this.state.data.concat(listData);
    this.setState({
      data,
      loadingMore: false,
    }, () => {
      window.dispatchEvent(new Event('resize'));
    });
  }
  render() {
    const { loading, loadingMore, showLoadingMore } = this.state;
    const loadMore = showLoadingMore ? (
      <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
        {loadingMore && <Spin />}
        {!loadingMore && <Button onClick={this.onLoadMore}>loading more</Button>}
      </div>
    ) : null;
    return (
      <List
        itemLayout="vertical"
        loading={loading}
        loadMore={loadMore}
        size="large"
        pagination={{
          onChange: (page) => {
            console.log(page);
          },
          // total: 23,
          pageSize: 3,
        }}
        dataSource={this.state.data}
        renderItem={item => (
          <List.Item
            key={item.title}
            actions={[<IconText type="star-o" text="156" />, <IconText type="like-o" text="156" />, <IconText type="message" text="2" />]}
            extra={<img width={272} alt="logo" src={item.img} style={{ height: 220 }} />}
          >
            <List.Item.Meta
              avatar={<Avatar src={item.avatar} />}
              title={<a href={item.href}>{item.title}</a>}
              description={item.description}
            />
            {item.content}
          </List.Item>
        )}
      />
    );
  }
}

export default CommdityList;
